<template>
	<view class="page">
		<view class="account" v-if="data.list.length">
			<view class="account-item" v-for="item in data.list" :key="item.id" @click="handleClickAccount(item)">
				<image class="qrcode" :src="item.qr_code" mode="aspectFill"></image>
				<view class="account-name">
					<view class="">
						{{item.address}}
					</view>
					<view class="currencie">
						{{t('account.account.edit.currency')}}:{{proxy.$util.getCurrencyType(item.currencie_id)}}
					</view>
				</view>

				<view class="account-actions">
					<view @click.stop="proxy.$util.navigateTo(`/pages/account/account/edit/edit?id=${item.id}`)">
						<uni-icons type="compose" color="#999" size="24"></uni-icons>
					</view>
					<view @click.stop="handleDel(item.id)">
						<uni-icons type="trash" color="#ee3241" size="24" ></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<no-item :text="t('account.account.not_tips')" v-else></no-item>
		<view class="add-btn page-fixed-bottom">
			<view @click="proxy.$util.navigateTo(`/pages/account/account/edit/edit`)" class="btn-primary">
				{{ $t('account.account.add_account') }}
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		t
	} from '@/locale/index';

	const {
		proxy
	} = getCurrentInstance();


	const data = ref({
		isMore: false,
		list: [],
		isSel: 0,
	});

	const getList = () => {
		proxy.$http.get('customer_account').then(res => {
			data.value.list = res.data;
		})
	};

	const handleClickAccount = (account) => {
		if (data.isSel) {
			uni.$emit('selectAccount', account);
			proxy.$util.back();
		}
	}

	// 处理删除
	const handleDel = (id) => {
		uni.showModal({
			content: t('account.account.del_tips'),
			success: res => {
				if (res.confirm) {
					proxy.$http.del(`customer_account/${id}`).then(r => {
						data.value.list = data.value.list.filter(item => item.id != id);
						proxy.$util.msg(r.message);
						// console.log(r,"删除成功");
					});
				}
			}
		})
	};
	onLoad((option) => {
		data.isSel = option.is_sel || 0;
	});
	onShow(() => {
		getList();
	});
	onReachBottom(() => {
		if (data.value.isMore) getList();
	});
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.account {
		&-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			color: #333;
			font-size: 24rpx;
		}

		.qrcode {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}

		&-name {
			flex: 1;
			margin-left: 20rpx;
		}

		.currencie {
			color: #999;
			margin-top: 10rpx;
		}


		&-actions {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
	}
</style>